<template>
    <div class="chat-page">
        <back :title="$route.query.name"></back>
        <div class="chat-content">
            <div class="chat-box" :style="stylebox" ref="clist">
                <ul class="chat-list">
                    <template v-if="chatlist && chatlist.length > 0">
                        <li v-for="(item,index) in chatlist" :key="index">
                            <div class="times" v-if="item.gstime">{{item.gstime}}</div>
                            <div class="msg" :class="{self:!item.isLeft}">
                                <span v-if="item.isLeft" class="avatar iconfont icon-morentouxiang"></span>
                                <div class="chat-msg" :class="[item.isLeft?'chatleft':'chatright']" v-html="item.content"></div>
                                <span v-if="!item.isLeft" class="avatar iconfont icon-morentouxiang self"></span>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
            <!--隐藏聊天工具，表情-->
            <div class="hide-chat-tool" v-show="openTool" @click="hidetool"></div>
            <div class="chat-msg-input" :class="{addheight:openTool}">
                <div class="chat-tool">
                    <div class="additional">
                        <span @click="smile"><i class="cubeic-smile"></i></span>
                        <!-- <span @click="add"><i class="cubeic-add"></i></span> -->
                    </div>
                    <div class="chat-input"><input type="text" @keyup.enter="sendChat" v-model.trim="content" placeholder="说的什么吧..."></div>
                    <button type="button" class="send-msg" :class="{active:content}" @click="sendChat">发送</button>
                </div>
                <div class="additional-box">
                    <div class="enjoy" v-show="enjoyshow">
                        <cube-slide ref="slide" :data="emojiHtml" :initial-index="1" :auto-play="false" :loop="false">
                            <cube-slide-item v-for="(item, index) in emojiHtml" :key="index">
                                <div class="em" v-for="(it,i) in item" :key="i" v-html="it.node.outerHTML" @click="clickEmoji(it)"></div>
                            </cube-slide-item>
                        </cube-slide>
                    </div>
                    <!-- <div class="tool" v-show="!enjoyshow">
                        <div class="tool-item">
                            <span class="pic"><i class="cubeic-picture"></i></span>
                            <p>照片</p>
                        </div>
                        <div class="tool-item">
                            <span class="pic"><i class="cubeic-red-packet"></i></span>
                            <p>红包</p>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
import time from '@/util/time'
export default {
    data(){
        return{
            chatlist:[],
            inright:false,
            content:'',
            openTool:false,//打开聊天工具
            enjoyshow:false,
            arrayTwo:[],//改变后的私信消息
            chatList:[],//个人消息
            emojiHtml: [],
            stylebox:''
        }
    },
    mounted(){
        this.getrecordMsg()
        this.clistScroll()
    },
    computed:{
        ...mapGetters([
            'getRecordmsg'
        ])
    },
    watch:{
        openTool(val){
            if(val){
                this.stylebox = "height:calc(100% - 250px)"
            }else{
                this.stylebox = "height:calc(100% - 50px)"
            }
            this.clistScroll()
        },
        getRecordmsg(val){
            let arr = val.list;
            for (let i = 0; i < arr.length; i++) {
                arr[i].gstime=time.getChatTime(arr[i].ctime_show,i>0?arr[i-1].ctime_show:0);
            }
			this.chatlist=arr;
            this.clistScroll()
        }   
    },
    methods:{
        /**
         * 获取聊天记录
         */
        getrecordMsg(){
            DB.read('huahui_chat',`target_${this.$route.query.uid}`)
        },
        /**
         * 固定滚动条
         */
        clistScroll(){
            this.$nextTick(function() {
                setTimeout( () => {
                    this.$refs.clist.scrollTop = this.$refs.clist.scrollHeight;
                },10)
            });
        },
        /**
         * 隐藏聊天工具
         */
        hidetool(){
            this.openTool = false
        },
        smile(){
            this.openTool = !this.openTool
            this.enjoyshow = true;
            let html = this.$Rong.RongIMEmoji.list;
            this.groups(html,21)
        },
        add(){
            this.openTool = true
            this.enjoyshow = false;
        },
        sendChat(){
            if(!this.content){
                return;
            }
            let target = {
                uid:this.$route.query.uid,
                name:this.$route.query.name,
                union_id:this.$route.query.union_id
            }
            this.$Rong.postMessage(this.content,target,'send')
            this.content = ''
        },
        clickEmoji(data){//点击表情
            let msg = this.$Rong.RongIMEmoji.symbolToEmoji(data.symbol);
            console.log(data)
            if(msg === data.emoji){
                msg = data.symbol
            }
            this.content = this.content +  msg;
        },
        groups(data,len){  //礼物分组
            let allData = [];
            let b=toString()
            let currData = [];
            data.map((item,i)=>{
                if (parseInt(item.needcoin)>10000){
                    item.mony=(parseInt(item.needcoin)/10000).toFixed(0)+'万'
                } else{
                    item.mony=parseInt(item.needcoin)
                }
                currData.push(item);
                if((i != 0 && (i + 1) % len == 0) || i == data.length - 1) {
                    allData.push(currData);
                    currData = [];
                }
            });
            this.emojiHtml=allData;
        },
    }
}
</script>


<style lang="stylus">
.chat-page{
    padding-top:50px;
    height:100%;
    background:#f7f7f7;
    .chat-content{
        height:100%;
        overflow hidden
        .chat-box{
            height calc(100% - 50px)
            overflow-y auto
        }
        .chat-list{
            .times{
                font-size 12px
                color #555
                text-align center
                line-height 25px
            }
            .msg{
                display flex
                padding 10px 10px
                align-items flex-start
                justify-content flex-start
                &.self{
                    justify-content flex-end
                }
                .avatar{
                    font-size 40px
                    flex-shrink 0
                    color #fff
                    background #3c81cb
                    border-radius 5px
                    &.self{
                        background #b6b7b9
                    }
                }
                .chat-msg{
                    background #fff
                    padding 10px
                    border-radius 5px
                    font-size 14px
                    position relative
                    line-height 22px
                    &.chatright{
                        margin-left 50px
                        margin-right 10px
                        background #fff
                        color #333
                        &:after{
                            content ""
                            display block
                            width 0
                            height 0
                            border-width 6px
                            border-color  transparent transparent  transparent #fff
                            border-style solid 
                            position absolute
                            top 5px
                            right -12px
                        }
                    }
                    &.chatleft{
                        margin-right 50px
                        margin-left 10px
                        background #3c81cb
                        color #fff
                        &:before{
                            content ""
                            display block
                            width 0
                            height 0
                            border-width 6px
                            border-color  transparent #3c81cb transparent transparent 
                            border-style solid 
                            position absolute
                            top 5px
                            left -12px
                        }
                    }
                    
                }
            }
        }
        .hide-chat-tool{
            position absolute
            top 0
            left 0
            bottom 0
            right 0
        }
        .chat-msg-input{
            width 100%
            height 50px
            position absolute
            bottom 0
            left 0
            background #d3dfec
            transition height 0.3s linear
            .chat-tool{
                width 100%
                height 50px
                display flex
                align-items flex-start
                padding 5px
                border-bottom 1px solid #b9d2ec
                border-top 1px solid #eee
                .additional{
                    color #555
                    font-size 30px
                    height 40px
                    line-height 40px
                    margin-right 5px
                }
                .chat-input{
                    flex 1
                    background #fff
                    // border 1px solid #000
                    border-radius 5px
                    height 40px
                    display flex
                    align-items center
                    input{
                        width 100%
                        height 25px
                        padding 0 5px
                        outline none
                        color #000
                        font-size 14px
                        line-height 25px
                    }
                }
                .send-msg{
                    min-width 60px
                    height 36px
                    color #fff
                    outline none 
                    background #5555
                    border 0
                    border-radius 5px
                    margin-left 10px
                    font-size 14px
                    &.active{
                        background #3c81cb
                        color #fff
                    }
                }
            }
            .additional-box{
                width 100%
                height 200px
                padding 10px 5px
                .enjoy{
                    width 100%
                    height 100%
                    .cube-slide-item{
                        display flex
                        flex-wrap wrap
                        align-items flex-start
                        .em{
                            width 14.28%
                            height 30px
                        }
                    }
                }
                .tool{
                    display flex
                    justify-content flex-start
                    flex-wrap wrap
                    .tool-item{
                        width 25%
                        text-align center
                        margin-bottom 10px
                        .pic{
                            width 60px
                            height 60px
                            margin 0 auto
                            display flex
                            align-items center
                            justify-content center
                            font-size 30px
                            color #333
                            background #999
                            border-radius 10px
                        }
                        p{
                            font-size 12px
                            color #ffffff
                            line-height 25px
                        }
                    }
                }
            }
            &.addheight{
                height 250px
            }
        }
    }
}
</style>
